<template>
    <page>
        <m-header>选择地推专车</m-header>
        <div tag="div" v-for="(i, index) in list" :key="index" class="h70 corner white-bg mx12 mt10 px20 tap"
             flex="cross:center" @click="getCode(i)">
            <img :src="iconImgs.get(i.id)" class="sz48">
            <p class="f18 ml20">{{i.label}}</p>
        </div>

        <!-- 专车地推码 begin-->
        <div v-transfer-dom>
            <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
                <qrcode :value="qrcode" type="img" :size="200" class="mt40"></qrcode>
                <p class="text mt6 mb20 f14">扫描二维码或右上角分享认证专车</p>
                <p class="tc h44 bdt c2 tap mt20" @click="showHideOnBlur = false">关闭窗口</p>
            </x-dialog>
        </div>
        <!-- 专车地推码 end-->
    </page>
</template>
<script>
  import carTypes from './carType.json'
  import iconImgs from './iconImgs'
  import { Qrcode } from 'vux'
  import qs from 'qs'
  import urljoin from 'url-join'
  import { closePop } from '@/utils/tiny'
  export default {
    data () {
      return {
        showHideOnBlur: false,
        qrcode: '',
        list: carTypes,
        iconImgs,
        form: {}
      }
    },
    computed: {},
    methods: {
      PitsPullData () {},
      PitsPushData () {},
      async getCode ({id, label}) {
        let {msg: code} = await this.$get_loading('member/getSpeadCode')
        const params = qs.stringify({
          carTypeId: id,
          speadUserId: this.$store.getters.userInfo.id,
          code
        })
        let url = ''
        if (baseURL == '/') {
          url = location.origin
        } else {
          url = baseURL
        }
        this.qrcode = urljoin(url, `/index/scanCarTyep?${params}`)
        this.showHideOnBlur = true
      },
      closePop () {
        return closePop(this, 'showHideOnBlur')
      }
    },
    beforeRouteLeave (to, from, next) {
      next(this.closePop())
    },
    components: {Qrcode}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
